<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>性能</title>
<style type="text/css">
li {
	height: 50px;
}
</style>
</head>
<body>
	<ul id="ul">
		<li id="one">one</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li>-----------</li>
		<li id="two">two</li>

	</ul>
	<button style="position: fixed;top: 0;left: 0;" onclick="show()">显示信息</button>
	<script type="text/javascript">
		function show() {
			var one = document.getElementById("one");
			var two = document.getElementById("two");
			var oneinfo = one.getBoundingClientRect();
			var twoinfo = two.getBoundingClientRect();
			var str = "oneinfo:top:" + oneinfo.top + "oneinfo:left:"
					+ oneinfo.left + "-------twoinfo:top:" + twoinfo.top
					+ "twoinfo.left:" + twoinfo.left;
			alert(str);

		}
	</script>
</body>
</html>

